<template>
  <div>
    <teleport to="body">
      <!-- 页面内容 -->
      <div v-if="isButtonVisible" class="floating-button-container">
        <div v-for="(button, index) in buttons" :key="index" class="floating-button" @mouseover=" showMenu(index)"
          @mouseleave="handleMouseLeave(index)" @click.stop="handleClick(button)">
          <component :is="button.icon" :style="{ width: '20px', height: '20px' }" />
          <transition name="fade">
            <div v-if="isMenuVisible && hoveredIndex === index" class="menu-popup" @mouseover="keepMenuVisible"
              @mouseleave="hideMenu">
              <div class="text" v-for="(child, child_index) in button.children" :key="child_index"  @click.stop="childHandleClick(child)"> {{ child.title }}
              </div>
            </div>
          </transition>
        </div>
      </div>
    </teleport>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, defineProps } from 'vue';
import { Service, Plus } from '@element-plus/icons-vue'; // 确保正确导入图标
const isMenuVisible = ref(false); // 控制菜单的显示状态
const hoveredIndex = ref<number | null>(null); // 记录当前鼠标悬停的按钮索引
const isButtonVisible = ref(false); // 新增变量，用于控制按钮的显示
const scrollThreshold = 200; // 设定按钮显示的滚动高度阈值
let lastScrollY = window.scrollY; // 用于追踪上一次滚动位置
import {  ElMessageBox } from 'element-plus'
import router from '../router/index'
// 定义 props 类型
interface ButtonData<T = any> {
  id: number,
  title: string,
  type: string,
  icon: typeof Service | typeof Plus | any; // 根据您的实际图标类型调整
  children: T;
  showMenu: boolean;
}

// 接收父组件传递的 buttons 数组
const props = defineProps<{ buttons: ButtonData[] }>();

const showMenu = (index: number) => {
  if (props.buttons[index].showMenu) {
    isMenuVisible.value = true;
    hoveredIndex.value = index;
  }
};
const handleClick = (button: any) => {
  if (button.type == 'top')
    window.scrollTo({ top: 0, behavior: 'smooth' });
}
//子节点菜单点击事件
const childHandleClick=(item:any)=>{
  console.log(item)
  if(item.type == 'url'){
    router.push({name:'/'+item.url})
  }

  if(item.type == 'dialog'){
    ElMessageBox.alert('您好，很抱歉给您带来不友好的体验，或者将您的问题或建议发送至此邮箱：xxxx.com,我们将第一时间处理。', '问题反馈', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: '好的',
        })
  }
 
}

const hideMenu = () => {
  // 只有在鼠标没有悬停在任何一个按钮上时隐藏菜单
  if (hoveredIndex.value === null) {
    isMenuVisible.value = false;

  }
};
const handleScroll = () => {
  const currentScrollY = window.scrollY;
  if (currentScrollY > scrollThreshold && currentScrollY > lastScrollY) {
    isButtonVisible.value = true;
  } else if (currentScrollY <= scrollThreshold) {
    isButtonVisible.value = false;
    hideMenu(); // 当滚动回顶部时隐藏菜单
  }
  lastScrollY = currentScrollY; // 更新上一次滚动位置
};
const keepMenuVisible = () => {
  // 保持菜单显示（逻辑保持不变）
};
const handleMouseLeave = (index: number) => {
  if (props.buttons[index].showMenu && hoveredIndex.value === index) {
    hoveredIndex.value = null;
    hideMenu();
  }
};
onMounted(() => {

  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.floating-button-container {
  position: fixed;
  right: 20px;
  bottom: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
}

.menu-popup {
  position: absolute;
  right: 60px;
  color: black;
  width: 150px;
  border: 1px solid #dcdcdc;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  background-color: white;
  padding: 10px;
  border-radius: 14px;
  z-index: 999999999999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to

/* .fade-leave-active in <2.1.8 */
  {
  opacity: 0;
}


.menu-popup .text {
  padding: 15px;
  text-align: center;
  border-radius: 8px;

}

.menu-popup .text:hover {

  background-color: #EFEFEF;
}
</style>